<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>websocket测试</title>
</head>

<body>
    <input id="txt" type="text" /><button type="button" id="send" onclick="sendMessage">发送消息</button>
</body>
<script type="text/javascript">
    window.onload = function () {
        console.log("window.onload...");

        //创建一个webSocket实例，执行后，客户端就会与服务端连接
        var ws = new WebSocket("ws://localhost:15880/WsServer");

        //当WebSocket创建成功时，触发onopen事件
        ws.onopen = function () {
            console.log("open");
            // 复杂的数据结构，在通过连接发送之前，必须进行序列化。 
            const json = JSON.stringify({
                type: 'keepalive',
                id: ''
            });
            ws.send(json); //将消息发送到服务端
        }

        //当客户端收到服务端发来的消息时，触发onmessage事件
        ws.onmessage = function (e) {
            //e.data 的数据格式也是字符串，手动解析这些数据才能得到其他格式的数据。
            const _data = JSON.parse(e.data);
            console.log(e.data, _data);
        }

        //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
        ws.onclose = function (e) {
            console.log("close");
        }

        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        ws.onerror = function (e) {
            console.log(error);
        }


        document.getElementById("send").onclick = function () {
            var json = JSON.stringify({ value: document.getElementById("txt").value, type: "keepalive" })
            console.log("发送消息:" + json)
            ws.send(json);
        }

    };

</script>

</html>